<template>
  <div class="box">
    <div class="select">
      <el-form style="margin-top: 10px;" ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="姓名" label-width="50px" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="证件号码" prop="number">
              <el-input
                v-model="form.number"
                placeholder="请输入证件号码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="岗位" prop="work">
              <el-select v-model="form.work" placeholder="请选择岗位">
                <el-option label="任课老师" value="renke"></el-option>
                <el-option label="班主任" value="bzr"></el-option>
                <el-option label="校长" value="xiaozhang"></el-option>
                <el-option label="职工" value="zhigong"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="学科" label-width="50px" prop="teach">
              <el-select v-model="form.teach" placeholder="请选择学科">
                <el-option label="语文" value="yuwen"></el-option>
                <el-option label="数学" value="shuxue"></el-option>
                <el-option label="英语" value="yingyu"></el-option>
                <el-option label="物理" value="wuli"></el-option>
                <el-option label="化学" value="huaxue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="任职状态" prop="state">
              <el-select v-model="form.state" placeholder="请选择状态">
                <el-option label="在职" value="zaizhi"></el-option>
                <el-option label="离职" value="lizhi"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider></el-divider>
      <div class="btn">
        <el-button
          type="primary"
          @click="onSubmit"
          style="width: 80px; height: 35px; margin-right: 10px"
          >查询</el-button
        >
        <el-button style="width: 80px; height: 35px" @click="resetForm('form')"
          >重置</el-button
        >
      </div>
    </div>

    <div class="box-content">
      <div class="icon">
        <i class="el-icon-download">导出名单</i>
        <el-dropdown style="float: right">
          <i class="el-icon-upload2">导入教师</i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>导入教师模版</el-dropdown-item>
            <el-dropdown-item>下载导入模版</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <i class="el-icon-circle-plus" @click="handleClick">新增教师</i>
      </div>
      <!-- //表格 -->
      <div class="table-container">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="序号" width="50px">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="70px">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="50px">
          </el-table-column>
          <el-table-column prop="kind" label="证件类型" width="80px">
          </el-table-column>
          <el-table-column prop="number" label="证件号码" width="180px">
          </el-table-column>
          <el-table-column prop="school" label="就职学校" width="120px">
          </el-table-column>
          <el-table-column prop="contact" label="联系方式" width="120px">
          </el-table-column>
          <el-table-column prop="em" label="邮箱" width="180px">
          </el-table-column>
          <el-table-column prop="time" label="创建时间"> </el-table-column>
          <el-table-column prop="state" label="任职状态"> </el-table-column>
          <el-table-column prop="system" label="系统状态"> </el-table-column>
          <el-table-column prop="action" label="操作" width="180">
            <template slot-scope="scope">
              <el-button  type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- //分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes,->, prev, pager, next"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const singleRow = {
      date: "1",
      name: "王小虎",
      sex: "男",
      kind: "身份证",
      number: "123456789012345678",
      school: "小学",
      contact: "12345678901",
      em: "123456789@qq.com",
      time: "2020-01-01",
      state: "在职",
      system: "正常",
      action: "编辑",
    };
    return {
      form: {
        name: "",
        number: "",
        work: "",
        teach: "",
        state: "",
      },

      //生成包含十行相同数据的数组

      tableData: Array.from({ length: 10 }, (_, index) => ({
        ...singleRow,
        date: index + 1, //添加序号
      })),
    };
  },
  methods: {
    handleClick(){
this.$router.push({name:'EditTeacher'})
    },

handleSizeChange(val){
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },


    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column; /**垂直排列 */
  height: 100vh;
  .select {
 
   
    height: 150px;
    background-color: #f9f7f7;
    border-radius: 10px;
    padding: 10px;
    .el-divider--horizontal {
      margin: 0;
    }
    .btn {

      margin-top: 20px;
      margin-left: 8px;
    }
  }
  .box-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 10px;
    background-color: #f9fbfbe5;
    border-radius: 10px;
    margin-top: 20px;
    // height: 560px;
    .icon {
      padding: 10px;
      display: flex;
      justify-content: flex-end;/**子元素会靠右对齐 */
      gap: 15px;
      i {
        display: flex;
        align-content: center;
        cursor: pointer;
        // margin-top: 20px;
        // float: right;
        // margin-right: 10px;
        color: blue;
        margin-bottom: 20px;
        &:hover{
          color:#0066cc
        }
      }
    }
    .table-container {
     flex: 1;
     overflow: auto;
      margin-bottom: 10px;
    }
    .block{
      display: flex;
      justify-content: flex-end;

      flex-shrink:0;/**控制子元素在空间不足时的收缩比例 */
    }
  }
}
</style>
